<template>
  <div class="box">
      <ul>
          <li v-for="item in list" :key="item.id"
            @click="topage(item.path)"
            :class="pathnum === item.path ? 'color' :''"
          >
              {{item.name}}
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[
                {id:1,name:'用户管理',path:'/user'},
                {id:2,name:'项目管理',path:'/project'},
                {id:3,name:'内容管理',path:'/datas'}
            ],
            pathnum:'/user'
        }
    },
    methods:{
        topage(path){
            this.pathnum = path
            this.$router.push(path)
        }
    }
}
</script>

<style lang="scss" scoped>
    .box{
        width: 200px;
        // margin-top: 10px;
        height: calc(100vh - 90px);
        background: #333;
        color: white;
        padding-top:20px;
        ul{
            margin-left: 65px;
        }
        li{
            margin-top: 20px;
            cursor: pointer;
            list-style: none;
        }
    }
    .color{
        color: gray;
    }
</style>
